import * as echarts from "echarts";
import axios from "axios";

export async function shebeishuFn() {
  let military_statistics_data1: any[] = [];
  let military_statistics_data2: any[] = [];
  const res = await axios.post("http://localhost:8080/x4");
  military_statistics_data1 = res.data.data[0].values
  military_statistics_data2 = res.data.data[1].values

  const chart = echarts.init(
      document.getElementById("shebeishu") as HTMLElement
  );

  // const military_statistics_data3 = [345, 240, 135, 325, 155, 340, 250, 345, 240, 135, 325, 155];
  var fontColor = "#D8DBDF";
  var option = {
    grid: {
      left: 60,
      right: 60,
      top: 40,
      bottom: "8%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      textStyle: {
        fontSize: 24,
      }
    },
    legend: {
      show: true,
      icon: "stack",
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 50,
      textStyle: {
        color: "#D8DBDF",
        fontSize: 22
      },
      orient: 'horizontal', // 水平排列
      top: 0,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLabel: {
          color: fontColor,
          fontSize: 18
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#397cbc",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "red",
          },
        },
        data: [
          "2023-12",
          "2024-01",
          "2024-02",
          "2024-03",
          "2024-04"
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 400,
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: fontColor,
            fontSize: 18
          },
        },
        axisLine: {
          lineStyle: {
            color: "#27b4c2",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: '#384267',
            width: 1,
            type: 'dashed',
          },
          show: true,
        },
      },
    ],
    series: [
      {
        name: "源主机到目标主机",
        type: "line",
        symbol: "circle",
        symbolSize: 8,
        smooth: true,

        itemStyle: {
          normal: {
            color: "#0092f6",
            lineStyle: {
              color: "#0092f6",
              width: 4,
            },
            areaStyle: {
              //color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(7,44,90,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(0,146,246,0.9)",
                },
              ]),
            },
          },
        },
        markPoint: {
          itemStyle: {
            normal: {
              color: "red",
            },
          },
        },
        data: military_statistics_data1,
      },
      {
        name: "目标主机到源主机",
        smooth: true,
        type: "line",

        symbol: "circle",
        symbolSize: 8,

        itemStyle: {
          normal: {
            color: "#00d4c7",
            lineStyle: {
              color: "#00d4c7",
              width: 4,
            },
            areaStyle: {
              //color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(7,44,90,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(0,212,199,0.9)",
                },
              ]),
            },
          },
        },
        data: military_statistics_data2,
      }
    ],
  };

  chart.setOption(option,true);
}

export function gongdanshuFn() {
  const chart = echarts.init(
    document.getElementById("gongdanshu") as HTMLElement
  );
  let newData = {
    xAxis: ["西峰", "庆城", "环县", "华池", "合水", "正宁", "宁县", "镇原"],
    yAxis: [200, 100, 300, 200, 400, 300, 200, 100],
  };
  const seriesData = {
    name: "设备数",
    type: "bar",
    barWidth: 30,
    silent: true,
    itemStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "rgba(34, 211, 255, 1)" },
          { offset: 1, color: "rgba(34, 211, 255, 0.02)" },
        ]),
      },
    },
    data: newData.yAxis,
  };

  const option = {
    grid: {
      containLabel: true,
      bottom: "5%",
      top: "5%",
      left: "10%",
      right: "0%",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    xAxis: {
      triggerEvent: true,
      data: newData.xAxis,
      axisLabel: {
        show: true,
        fontSize: 18,
        color: "#D8DBDF",
        align: "center",
        verticalAlign: "top",
      },
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        axisLabel: {
          interval: 0,
          show: true,
          fontSize: 18,
          color: "#D8DBDF",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
          },
        },
      },
    ],
    series: seriesData,
  };

  chart.setOption(option);
}
